<template>
  <view class="button-groun">
    <view class="less-btn" @click.stop="less">－</view>
    <input type="number" :value="value" @blur="blurHandle" @click.stop="function(){return false}" />
    <view class="add-btn" @click.stop="add">＋</view>
  </view>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: () => 1,
    },
  },
  data() {
    return {};
  },
  methods: {
    blurHandle(e) {
      if (e.target.value < 1 || !e.target.value) {
        this.$emit("input", 1);
        this.$forceUpdate();
      } else {
        this.$emit("input", e.target.value);
      }
    },
    less() {
      if (this.value < 2) return false;
      this.$emit("input", this.value - 1);
    },
    add() {
      this.$emit("input", this.value + 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.button-groun {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  text-align: center;
  input {
    width: 70rpx;
    height: 50rpx;
    background-color: #f1f2f4;
    margin: 0 5rpx;
    z-index: 0;
  }
  .less-btn,
  .add-btn {
    width: 60rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 16px;
    background: #f1f2f4;
  }
  .less-btn {
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
  }
  .add-btn {
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
}
</style>